// import Guide from '@/components/Guide';
// import { trim } from '@/utils/format';
// import { PageContainer } from '@ant-design/pro-components';
// import { useModel } from '@umijs/max';
// import styles from './index.less';

// const HomePage: React.FC = () => {
//   const { name } = useModel('global');
//   return (
//     <PageContainer ghost>
//       <div className={styles.container}>
//         <Guide name={trim(name)} />
//       </div>
//     </PageContainer>
//   );
// };

// export default HomePage;

import React, { useEffect } from 'react';

// NOTE: Use the editor from source (not a build)!
// import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import MultiRootEditor from '@ckeditor/ckeditor5-editor-multi-root/src/multirooteditor';

import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

const editorConfiguration = {
  plugins: [Essentials, Bold, Italic, Paragraph],
  toolbar: ['bold', 'italic'],
};

const HomePage: React.FC = () => {
  // const [editor, setEditor] = useState();

  useEffect(() => {
    MultiRootEditor.create(
      // Define roots / editable areas:
      {
        header: document.querySelector('#header'),
        content: document.querySelector('#content'),
        leftSide: document.querySelector('#left-side'),
        rightSide: document.querySelector('#right-side'),
      },
      // Editor configration:
      {
        plugins: [Essentials, Bold, Italic, Paragraph],
        toolbar: {
          items: [
            'undo',
            'redo',
            '|',
            'heading',
            '|',
            'bold',
            'italic',
            '|',
            'link',
            'uploadImage',
            'insertTable',
            'mediaEmbed',
            '|',
            'bulletedList',
            'numberedList',
            'outdent',
            'indent',
          ],
        },
      },
    )
      .then((editor) => {
        window.editor = editor;

        // Append toolbar to a proper container.
        const toolbarContainer = document.querySelector('#toolbar');
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);

        // Make toolbar sticky when the editor is focused.
        editor.ui.focusTracker.on('change:isFocused', () => {
          if (editor.ui.focusTracker.isFocused) {
            toolbarContainer.classList.add('sticky');
          } else {
            toolbarContainer.classList.remove('sticky');
          }
        });
      })
      .catch((error) => {
        console.error('There was a problem initializing the editor.', error);
      });
  }, []);

  return (
    <div className="App">
      <h2>Using CKEditor 5 from source in React</h2>

      {/* <CKEditor
        editor={ClassicEditor}
        config={editorConfiguration}
        data="<p>Hello from CKEditor 5!</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          console.log('Editor is ready to use!', editor);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
        onBlur={(event, editor) => {
          console.log('Blur.', editor);
        }}
        onFocus={(event, editor) => {
          console.log('Focus.', editor);
        }}
      /> */}
      <div id="toolbar"></div>

      <div id="header">福建省电力发生的记录卡</div>
      <div id="content">束带结发了发生的记录卡</div>
      <div id="left-side">复苏的加快了沙发奖登录框</div>
      <div id="right-side">家乐福第三款见风使舵了</div>
    </div>
  );
};

export default HomePage;
